<template>
  <header class="header clearfix">
    <div class="menu-collapse pull-left">
      <i
        class="fa fa-outdent"
        style="font-size: 16px;vertical-align: middle;"
        :class="{ 'transform-icon': isCollapse === true }"
        @click="collapse"
      ></i>
    </div>
    <div class="pull-left">
      <breadcrumb />
    </div>
    <div class="info-block pull-right">
      <screen-full></screen-full>
      <el-dropdown @command="handleCommand" trigger="click">
        <span class="el-dropdown-link">
          {{$global.userInfo.username}}
          <i class="fa fa-caret-down"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="modifyPwd">修改密码</el-dropdown-item>
          <el-dropdown-item command="loginOut">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <!--操作弹窗-->
    <el-dialog
      :close-on-click-modal="false"
      title="修改密码"
      :visible.sync="modVisible"
      width="30%"
      center
    >
      <el-form
        ref="modForm"
        :model="modForm"
        :rules="modFormRule"
        status-icon
        label-width="90px"
        size="small"
      >
        <el-form-item label="旧密码" prop="pwd_old">
          <el-row>
            <el-col :span="24">
              <el-input v-model.trim="modForm.pwd_old" type="password"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="新密码" prop="pwd_new">
          <el-row>
            <el-col :span="24">
              <el-input v-model.trim="modForm.pwd_new" type="password"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modVisible=false" size="mini">取 消</el-button>
        <el-button type="primary" @click="handleMod" size="mini">确 定</el-button>
      </div>
    </el-dialog>
  </header>
</template>

<script>
import {mapActions, mapMutations, mapState} from "vuex";
import breadcrumb from "@/view/page/breadcrumb";

export default {
  components: {
    breadcrumb
  },
  data() {
    return {
      modVisible: false,
      modForm: {
        pwd_new: "",
        pwd_old: "",
        user_id: ""
      },
      modFormRule: {
        pwd_new: [{ required: true, message: "请输入新密码", trigger: "blur" }],
        pwd_old: [{ required: true, message: "请输入旧密码", trigger: "blur" }]
      }
    };
  },
  computed: {
    ...mapState({
      isCollapse: state => state.app.isCollapse
    })
  },
  mounted() {},
  methods: {
    ...mapMutations("tagInfo", ["setTags", "clearTags"]),
    ...mapMutations(["collapse"]),
    ...mapActions("userManage", ["modPassword"]),
    handleCommand(command) {
      const vm = this;
      if (command === "loginOut") {
        vm.loginOut();
      }
      if (command === "modifyPwd") {
        vm.modifyPwd();
      }
    },
    resetModForm() {
      const vm = this;
      vm.modForm = {
        pwd_new: "",
        pwd_old: "",
        user_id: ""
      };
      vm.$nextTick(() => {
        vm.$refs.modForm.clearValidate();
      });
    },
    modifyPwd() {
      this.resetModForm();
      this.modForm.user_id = this.$global.userInfo.userId;
      this.modVisible = true;
    },
    loginOut() {
      let token = localStorage.getItem("token").split(" ")[1];

      this.clearToken(token);
    },
    clearToken(token) {
      localStorage.clear();
      this.clearTags();
      this.$router.push("/login");

      return
      this.$axios({
        method: "delete",
        url: "/oauth/token?access_token=" + token,
        auth: {
          username: "csp-cli",
          password: "123456"
        }
      }).then(res => {
        if (res.code === "0000") {
          localStorage.clear();
          this.clearTags();
          this.$router.push("/login");
        }
      });
    },
    handleMod() {
      const vm = this;
      vm.$refs["modForm"].validate(valid => {
        if (valid) {
          vm.modPassword(vm);
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style type="text/scss" lang="scss" scoped>
@import "../../assets/common.scss";

.header /deep/ .el-badge__content {
  background: #354052;
}

.el-dropdown {
  font-size: 14px;
}

.el-dropdown-link {
  color: $white;
}

.transform-icon {
  transform: rotate(180deg);
}

.header /deep/ .el-badge__content.is-fixed {
  position: relative;
}

.item {
  margin-top: 10px;
  margin-right: 40px;
}

.header {
  position: relative;
  padding: 0 20px 0 10px;
  background: #354052;
  color: $white;
  @include line-height(50px);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
  .menu-collapse,
  .info-block {
    display: inline-block;
    @include line-height(50px);
    font-size: 14px;
  }
  .fa {
    position: relative;
    margin-left: 10px;
    cursor: pointer;
    font-size: 14px;
  }
}
</style>
